<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Toast</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/Toast.js"></script>
  </head>

  <body role="main">
    <p>Click a button to toggle a toast from that location:</p>
    <div class="demo">
      <style>
        .buttonContainer {
          background: #ddd;
          height: 250px;
          position: relative;
          width: 100%;
          width: 300px;
        }

        .buttonRow {
          display: flex;
          justify-content: space-between;
        }

        .buttonRow button {
          background: white;
          border: 1px solid gray;
          height: 50px;
          width: 50px;
        }

        .bottom {
          bottom: 0;
          left: 0;
          position: absolute;
          right: 0;
        }

        #toastContent {
          padding: 1em;
        }
      </style>

      <div class="buttonContainer">
        <div class="buttonRow">
          <button alt="top left" onclick="toggleToast('top-left')"></button>
          <button alt="top" onclick="toggleToast('top')"></button>
          <button alt="top right" onclick="toggleToast('top-right')"></button>
        </div>
        <div class="buttonRow bottom">
          <button
            alt="bottom left"
            onclick="toggleToast('bottom-left')"
          ></button>
          <button alt="bottom" onclick="toggleToast('bottom')"></button>
          <button
            alt="bottom right"
            onclick="toggleToast('bottom-right')"
          ></button>
        </div>
      </div>
      <elix-toast id="sampleToast" duration="1500">
        <div id="toastContent">
          Mmm... toast...
        </div>
      </elix-toast>

      <script>
        // This page reuses a single toast to open it from multiple locations,
        // which is pretty unusual. Normally, opening a toast is just a matter
        // of invoking its `open` method.
        function toggleToast(fromEdge) {
          const edgeChanged = sampleToast.fromEdge !== fromEdge;
          if (!sampleToast.closeFinished) {
            // Toast is currently open.
            if (edgeChanged) {
              // If we need to change edge, when toast has finished closing,
              // open it on the new edge.
              sampleToast.whenClosed().then(function() {
                toggleToast(fromEdge);
              });
            }
            sampleToast.close();
          } else {
            if (edgeChanged) {
              sampleToast.fromEdge = fromEdge;
            }
            sampleToast.open();
          }
        }
      </script>
    </div>
  </body>
</html>
